import { PlusOutlined } from '@ant-design/icons';
import {
  DrawerForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { useAppDispatch, useAppSelector } from '../store/hooks';
import { addEmployee } from '../apis/employee'

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export const AddEmployee = (props: any) => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  const role=localStorage.getItem('role')

  interface ValueType {
    name: string;
    distance: string;
    clickNum: number;
    complaints: number;
    price: number;
    workState: number;
    img: string;
    tags: string[];
  }

  return (
    <DrawerForm<{
      name: string;
      distance: string;
      clickNum: number;
      complaints: number;
      price: number;
      workState: number;
      img: string;
      tags: string[];
    }>
      form={form}
      trigger={
        <Button type="primary" disabled={role==="2"} style={{ textAlign: "center", marginBottom: 6, display: "inline-block", padding: 5, verticalAlign: "middle" }}>
          添加员工信息
        </Button>
      }
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        await waitTime(2000);
        values.tags = values.tags.toString().split(",")
        // console.log(values);

        addEmployee(values).then(res => {
          message.success('提交成功');
          props.finish()
        }).catch(err => {
          message.error('提交失败');
        })


        // 不返回不会关闭弹框
        return true;
      }}
    // visible={visible}
    >
      <ProForm.Group>
        <ProFormText
          name="name"
          width="md"
          label="员工姓名"
          tooltip="最长为 24 位"
          placeholder="请输入姓名"
        />
        <ProFormText width="sm" name="distance" label="距离" placeholder="请输入距离" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText width="md" name="clickNum" label="点击量" placeholder="请输入名称" />
        <ProFormText width="sm" name="complaints" label="投诉量" placeholder="请输入投诉数量" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          options={[
            {
              value: '0',
              label: '空闲中',
            },
            {
              value: '1',
              label: '工作中',
            },
          ]}
          width="xs"
          name="workState"
          label="工作状态"
        />
        <ProFormText width="sm" name="price" label="价格" placeholder="请输入价格" />
      </ProForm.Group>
      <ProFormText width="md" name="img" label="照片" placeholder="请输入照片地址" />
      <ProFormText width="md" name="tags" label="标签" placeholder='请按照"美丽，大方"的格式' />
    </DrawerForm>
  );
};